<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="图表" name="first">
        <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="90px">
          <el-form-item label="地区类型：" prop="type">
            <el-select v-model="queryParams.nature" placeholder="请选择地区类型" clearable size="small">
              <el-option v-for="dict in schoolNatureOptions" :key="dict.dictValue" :label="dict.dictLabel"
                :value="dict.dictValue" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>
        <div class="charts" v-if="clicktabs = '图表'">
          <div ref="chartpDom" class="map_dom"></div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="列表" name="second">
        <el-form :model="querys" ref="Form" :inline="true" label-width="90px">
          <el-form-item label="地区类型：" prop="type">
            <el-select v-model="querys.nature" placeholder="请选择地区类型" clearable size="small">
              <el-option v-for="dict in schoolNatureOptions" :key="dict.dictValue" :label="dict.dictLabel"
                :value="dict.dictValue" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery1">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery1">重置</el-button>
          </el-form-item>
          <div style="text-align: right;margin-top: -10px;">
            <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
          </div>
        </el-form>
        <el-table v-loading="loading" :data="facilityList">
          <el-table-column align="center" label="地区类型" prop="nature" :formatter="schoolNatureFormat"></el-table-column>
          <!-- <el-table-column v-for="dict in typeOptions" :key="dict.dictValue" :label="dict.dictLabel" align="center"
            :prop="dict.type" /> -->
          <el-table-column align="center" label="户外活动场地">
            <el-table-column align="center" label="上报数量"  prop="type1"></el-table-column>
          <el-table-column align="center" label="缺少数量" prop="lack1"></el-table-column>
          </el-table-column>
          <el-table-column align="center" label="教室及活动室">
            <el-table-column align="center" label="上报数量"  prop="type2"></el-table-column>
            <el-table-column align="center" label="缺少数量" prop="lack2"></el-table-column>
          </el-table-column>
          <el-table-column align="center" label="信息技术设备">
            <el-table-column align="center" label="上报数量"  prop="type3"></el-table-column>
            <el-table-column align="center" label="缺少数量" prop="lack3"></el-table-column>
          </el-table-column>
          <el-table-column align="center" label="卫生保健室">
            <el-table-column align="center" label="上报数量"  prop="type4"></el-table-column>
            <el-table-column align="center" label="缺少数量" prop="lack4"></el-table-column>
          </el-table-column>
          <el-table-column align="center" label="卫生间">
            <el-table-column align="center" label="上报数量"  prop="type5"></el-table-column>
            <el-table-column align="center" label="缺少数量" prop="lack5"></el-table-column>
          </el-table-column>
          <el-table-column align="center" label="厨房">
            <el-table-column align="center" label="上报数量"  prop="type6"></el-table-column>
            <el-table-column align="center" label="缺少数量" prop="lack6"></el-table-column>
          </el-table-column>
          <el-table-column align="center" label="饮水设备" prop="type7">
            <el-table-column align="center" label="上报数量"  prop="type7"></el-table-column>
            <el-table-column align="center" label="缺少数量" prop="lack7"></el-table-column>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { facilityList, exportFacility } from "@/api/qu/yssshesb";
export default {
  name: "StudentCheck",
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        nature: '0'
      },
      querys: {
        pageNum: 1,
        pageSize: 10,
        nature: ''
      },
      loading: false,
      typeOptions: [],
      schoolNatureOptions: [],
      facilityList: [
      ],
      echartList: [
      ],
      echartList2: [
      ],
      charts: null,
      activeName: 'first',
      title: '城区园',
    };
  },
  created() {
    this.getDicts("facility_type").then(response => {
      this.typeOptions = response.data.map(item => {
        return {
          ...item,
          type: 'type' + item.dictValue
        }
      });
      this.getList();
      this.getListEchart(this.queryParams.nature)
    });
    this.getDicts("school_nature").then(response => {
      this.schoolNatureOptions = response.data;
    });

  },
  mounted() {
    this.charts = this.$echarts.init(this.$refs.chartpDom);
    window.addEventListener("resize", this.monitorResize);
    // this.chartsFun()
  },
  methods: {
    async getList(val) {
      this.loading = true;
      try {
        const obj = {
          nature: val
        }
        const data = await facilityList(obj);
        this.facilityList = data.rows;
        this.loading = false;
      } catch (error) {
        console.log(error);
      }
    },
    async getListEchart(val) {
      this.loading = true;
      try {
        const obj = {
          nature: val
        }
        const data = await facilityList(obj);
        if (data.rows.length == 0) {
          this.echartList = []
        } else {
          this.echartList = this.typeOptions.map((item, index) => {
            return {
              ...item,
              type: data.rows[0]['type' + item.dictValue]
            }
          })
          const obj = data.rows[0]
          const list = [obj.lack1,obj.lack2,obj.lack3,obj.lack4,obj.lack5,obj.lack6,obj.lack7]
          this.echartList2 = list

          console.log(this.echartList2,'-----this.echartList2');
        }
        this.chartsFun()
        this.loading = false;
      } catch (error) {
        console.log(error);
      }
    },
    //地区类型字典翻译
    schoolNatureFormat(row, column) {
      return this.selectDictLabel(this.schoolNatureOptions, row.nature);
    },
    //设施字典翻译
    typeOptionsFormat(row, column) {
      return this.selectDictLabel(this.typeOptions, row.facilityType);
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getListEchart(this.queryParams.nature);
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.nature = '0'
      this.getListEchart(this.queryParams.nature);
    },
    /** 搜索按钮操作 */
    handleQuery1() {
      this.querys.pageNum = 1;
      this.getList(this.querys.nature);
    },
    /** 重置按钮操作 */
    resetQuery1() {
      this.facilityList = [
        { name: '', title: '', facilityType1: '', facilityType2: '', facilityType3: '', facilityType4: '', facilityType5: '', facilityType6: '', facilityType8: '', facilityType9: '' },
        { name: '', title: '', facilityType1: '', facilityType2: '', facilityType3: '', facilityType4: '', facilityType5: '', facilityType6: '', facilityType8: '', facilityType9: '' },
        { name: '', title: '', facilityType1: '', facilityType2: '', facilityType3: '', facilityType4: '', facilityType5: '', facilityType6: '', facilityType8: '', facilityType9: '' },

      ],
        this.querys.nature = ''
      this.getList(this.querys.nature,);
    },
    handleClick(tab, event) {
      // console.log(tab, event);
      this.clicktabs = tab.label
      this.$nextTick(() => {
        this.charts.resize();
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.querys;
      this.$confirm('是否确认导出数据?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return exportFacility(queryParams);
      }).then(response => {
        this.download(response.msg);
      })
    },
    chartsFun() {
      const option = {
        // backgroud:'#333',
        title: {
          text: '园所设备汇总统计',
          subtext: '单位：件',
          subtextStyle:{
            color: '#000'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
        },
        legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            axisLabel: {//x轴文字的配置
              show: true,
              interval: 0,//使x轴文字显示全
            },
            data: this.echartList.map((item) => item.dictLabel)
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        color: ['#2f89cf', '#27d08a'],
        series: [
          {
            name: '上报数量',
            type: 'bar',
            // stack: 'Ad',
            barWidth: '50',
            emphasis: {
              focus: 'series'
            },
            label: {
              show: true,
              position: 'inside',
              fontSize: 15
            },
            data: this.echartList.map((item) => item.type),
          },
          {
              name: '缺少数量',
              type: 'bar',
              barWidth: '50',
              emphasis: {
                  focus: 'series'
              },
              label: {
                show: true,
                position: 'inside',
                fontSize: 15
              },
              data: this.echartList2,
          },
        ]
      }
      // 使用刚指定的配置项和数据显示图表
      this.charts.setOption(option, true);
      window.addEventListener("resize", this.monitorResize);
    },
    //地图监听窗口缩放事件
    monitorResize() {
      this.charts.resize();
    },
  }
};
</script>
<style lang="scss" scoped>
.charts {
  margin-top: 50px;
  width: 100%;
  height: 500px;

  // border: 1px red solid;
  .map_dom {
    width: 90%;
    height: 100%;
  }
}
</style>
